<template>
    <div id="rollConfim">
        <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <div class="head">确认订单</div>
        <div class="content">
            <div class="title">
                <img src="../../assets/test.jpg" alt="">
                <section class="service">
                    <p>{{myUserFormat.welfareName}}</p>
                    <p>{{myUserFormat.welfareDetailed}}</p>
                    <div>{{myUserFormat.id}}积分<p>{{myUserFormat.specName}}X{{welfareData.exchangeNum}}</p></div>
                </section>
            </div>
            <!--<div class="address">
                  <p>收货地址</p>
                  <section class="shippingAddress">
                      <div>
                          <p>{{myUserData.schoolName}}<p>
                          </p>{{myUserData.buildingNo+'#'+myUserData.dormNo}}</p>
                          <img @click="alterAddress()" src="../../assets/task/next.png" alt="">
                      </div>
                      <div>
                            <p>{{myUserData.realName}}</p>
                            <p>{{myUserData.phoneNumber}}</p>
                      </div>
                  </section>
            </div>-->
            
            <div class="redeem">
                  <p>总计：<span>{{myUserFormat.specPrice * welfareData.exchangeNum}}积分</span></p>
                  <p @click="payOff()">确定</p>
            </div>
        </div>
        
        
       
        <!--支付-->
        <div id="payWindow" style="display: none;">  
        </div>
        <div id="payLayer" style="display: none;">  
           <p>请输入四位交易密码<img @click="closePay()" src="../../assets/task/chanelB.png" alt=""></p> 
            <section>
                <input ref="input1" v-model="iput1" maxlength="1" v-focus type="text">
                <input ref="input2" v-model="iput2" maxlength="1" type="text">
                <input ref="input3" v-model="iput3" maxlength="1" type="text">
                <input ref="input4" v-model="iput4" maxlength="1" type="text">
            </section> 
            <!--<router-link to="/cueMsg" style="text-decoration:none;"></router-link>-->
            <p class="sureNx" @click="formatSave">确定</p>
        </div> 
    </div>
</template>
<script>
export default {
  data () {
    return {
         checkPsw:{
            password:undefined,
        },
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        alterSch:false,
        radio: '1',
        myUserData:[],
        myUserFormat:{
            
        },
    }
  },
    watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  mounted(){
  },
  created(){
        // this.getCurrentUser();
        this.getParams();
  },
  methods:{
        alterAddress(){  
            document.getElementById('alterWindow').style.display = 'block';  
            document.getElementById('showLayer').style.display = 'block';        
        },
        payOff(){
            document.getElementById('payWindow').style.display = 'block';  
            document.getElementById('payLayer').style.display = 'block';
        },
        closeDiv() {  
            document.getElementById('alterWindow').style.display = 'none';  
            document.getElementById('showLayer').style.display = 'none';  
        },
        closePay() {  
            document.getElementById('payWindow').style.display = 'none';  
            document.getElementById('payLayer').style.display = 'none';  
        },
        dropMenu(){
            this.alterSch=!this.alterSch;
        },
        // 获取当前用户信息-需要使用默认地址
        // getCurrentUser(){
        //    this.$api.currUser().then((res)=>{
        //       if(res.code == '000000'){
        //           this.myUserData = res.data;
        //       }
        //   })
        // },
        //获取福利信息
        getParams() {
            this.welfareData=this.$route.query.data1;
            this.myUserFormat=this.$route.query.data2;
        },
        formatSave(){
             this.checkPsw.password = this.iput1+this.iput2+this.iput3+this.iput4
             this.$api.checkPayPsw(this.checkPsw).then((res)=>{
              if(res.code == '000000'){
                    this.$api.welfareFormat(this.welfareData).then((res)=>{
                        if(res.code == '000000'){
                            this.$router.push({path:'/cueMsg'})
                        }
                    })
              }else{
                  return
              }
          })
        },

  }
}
</script>
<style>
#rollConfim{
    height:100%;
    width:100%
}
#rollConfim .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 0.6rem;
}
#rollConfim .head{
    color:#8a8a8a;
    font-size:0.9rem;
    text-align:center;
    height:3.5rem;
    line-height:3.5rem;
    background-size:100% 100%;
    background-image:url(../../assets/welfare/title.png);
}
#rollConfim .content{
    color:#8a8a8a;
    padding:1.5rem 4rem;
    background-size:100% 100%;
    background-image:url(../../assets/welfare/connn.png);
}
#rollConfim .content .title{
    display:flex;
}
#rollConfim .content .title > img{
    width:5rem;
    height:5rem;
}
#rollConfim .content .service{
    width:12.5rem;
    background:#FFF;
    display:flex;
    flex-direction:column;
    margin-left:1rem;
}
#rollConfim .content .service > p:nth-child(1){
    flex:1;
    font-size:1rem;
    color:#000000;
}
#rollConfim .content .service > p:nth-child(2){
    font-size:0.8rem;
    margin-bottom:0.5rem;
}
#rollConfim .content .service div{
    font-size:1rem;
    display:flex;
    letter-spacing:0.1rem;
    justify-content:space-between;
    color:#000000;
}
#rollConfim .content .address{
    margin-top:3rem;
    border-bottom:1px solid #e2e2e2;
    border-top:1px solid #e2e2e2;
    padding:0.3rem 0px;
}
#rollConfim .content .address > p:before{
    content:url(../../assets/task/map.png);
    position:relative;
    top:0.3rem;
    right:0.5rem;
}
#rollConfim .content .address > p{
    font-size:0.9rem;
    color:#000000;
    margin-left:0.8rem;
}
#rollConfim .content .address .shippingAddress{
    height:3rem;
    line-height:1.5rem;
    width:90%;
    margin-left:0.75rem;
    margin-top:0.5rem;
}
#rollConfim .content .address .shippingAddress > div:nth-child(1){
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}
#rollConfim .content .address .shippingAddress > div:nth-child(1) > p{
    width:60%;
}
#rollConfim .content .address .shippingAddress > div:nth-child(1) > p > span{
    margin-left:1rem;
}
#rollConfim .content .address .shippingAddress > div:nth-child(1) > img{
    height:0.8rem;
    margin-top:0.4rem;
}
#rollConfim .content .address .shippingAddress > div:nth-child(2){
    width:60%;
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}
#rollConfim .content .address > img{
    width:1rem;
    height:1.3rem;
}
#rollConfim .content .redeem{
    width:100%;
    display:flex;
    margin-top:2.5rem;
    font-size:0.8rem;
    height:2rem;
    line-height:2rem;
    justify-content:space-between;
}
#rollConfim .content .redeem > p:nth-child(1){
    width:50%;
    color:#000;
}
#rollConfim .content .redeem > p:nth-child(1) > span{
    letter-spacing:0.15rem
}
#rollConfim .content .redeem > p:nth-child(2){
    background:#29a193;
    border-radius:8px;
    width:30%;
    color:#ffffff;
    text-align:center;
}
#rollConfim #payWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#rollConfim  #payLayer {   
    width: 84%;
    height: 40%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2;  
    color:#8a8a8a;
    border-radius:13px;
    position: absolute;  
}
#rollConfim  #payLayer > p:nth-child(1){
    width:80%;
    height:3rem;
    margin:auto;
    line-height:3.8rem;
    font-size:1rem;
    text-align:center;
    font-weight:bold;
}
#rollConfim  #payLayer > p:nth-child(1) > img{
    width:1rem;
    height:10x;
    float:right;
    margin-top:1.25rem;
}
#rollConfim  #payLayer section{
    width:80%;
    margin:3rem auto;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
}
#rollConfim  #payLayer section > input{
    height:3.5rem;
    width:3.5rem;
    text-align:center;
    border:1px solid #8a8a8a;
}
#rollConfim  #payLayer .sureNx{
    width:50%;
    background:#29a193;
    margin:auto;
    text-align:center;
    height:3rem;
    line-height:3rem;
    color:#fff;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
    border-radius:8px;
}
</style>